<template>
<div>
  <div class="row-main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
      </div>
      <el-form :model="form" ref="form" :rules="formRules" label-width="120px">
        <el-form-item label="appid" >
          <el-input size="small" v-model="form.appid" style="width: 100%;"></el-input>
        </el-form-item>
        <el-form-item label="商户号" label-width="120px">
          <el-input size="small" v-model="form.mch_id" style="width: 100%;"></el-input>
        </el-form-item>
        <el-form-item label="商户key" label-width="120px">
          <el-input size="small" v-model="form.shopKey" style="width: 100%;"></el-input>
        </el-form-item>
        <el-form-item label="secret" label-width="120px">
          <el-input size="small" v-model="form.secret" style="width: 100%;"></el-input>
        </el-form-item>
        <el-form-item label="支付证书文件(apiclient_cert.p12文件)" label-width="300px">
          <div class="file_upload_box">
            <input type="file" ref="key" accept="*" @change="changeFile"><a href="#none">点击上传</a>
          </div>
        </el-form-item>
        <el-form-item label-width="120px">
          <label>{{fileName}}</label>
        </el-form-item>
        <el-form-item label="上传公众号文件" label-width="180px">
          <div class="file_upload_box">
            <input type="file" ref="gzh" accept="*" @change="changeGZHFile"><a href="#none">点击上传</a>
          </div>
        </el-form-item>
        <el-form-item label-width="120px">
          <label>{{gzhName}}</label>
        </el-form-item>
        <el-form-item label-width="90px" prop="channelCompanyId">
          <el-button size="small" type="primary" @click="ok('form')" :loading="sub">提交</el-button>
          <el-button size="small" type="primary" @click="goBack" :loading="sub">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>

<!--    <el-form :model="form" ref="form" :rules="formRules" label-width="120px">-->
<!--      <el-row>-->
<!--        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }" :md="{ span: 11 }" :sm="{ span: 12 }">-->
<!--          <el-form-item label="appid" >-->
<!--            <el-input size="small" v-model="form.appid" style="width: 100%;"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }" :md="{ span: 11 }" :sm="{ span: 12 }">-->
<!--          <el-form-item label="商户号" label-width="120px">-->
<!--            <el-input size="small" v-model="form.mch_id" style="width: 100%;"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }" :md="{ span: 11 }" :sm="{ span: 12 }">-->
<!--          <el-form-item label="商户key" label-width="120px">-->
<!--            <el-input size="small" v-model="form.shopKey" style="width: 100%;"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }" :md="{ span: 11 }" :sm="{ span: 12 }">-->
<!--          <el-form-item label="secret" label-width="120px">-->
<!--            <el-input size="small" v-model="form.secret" style="width: 100%;"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }" :md="{ span: 11 }" :sm="{ span: 12 }">-->
<!--          <el-form-item label="支付证书文件(apiclient_cert.p12文件)" label-width="300px">-->
<!--            <div class="file_upload_box">-->
<!--              <input type="file" ref="key" accept="*" @change="changeFile"><a href="#none">点击上传</a>-->
<!--            </div>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }" :md="{ span: 11 }" :sm="{ span: 12 }">-->
<!--          <el-form-item label-width="120px">-->
<!--            <label>{{fileName}}</label>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }" :md="{ span: 11 }" :sm="{ span: 12 }">-->
<!--          <el-form-item label="上传公众号文件" label-width="180px">-->
<!--            <div class="file_upload_box">-->
<!--              <input type="file" ref="gzh" accept="*" @change="changeGZHFile"><a href="#none">点击上传</a>-->
<!--            </div>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }" :md="{ span: 11 }" :sm="{ span: 12 }">-->
<!--          <el-form-item label-width="120px">-->
<!--            <label>{{gzhName}}</label>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col class="box" :xl="{ span: 6, push: 1 }" :lg="{ span: 6, push: 1 }">-->
<!--          <el-form-item label-width="90px" prop="channelCompanyId">-->
<!--            <el-button size="small" type="primary" @click="ok('form')" :loading="sub">提交</el-button>-->
<!--            <el-button size="small" type="primary" @click="goBack" :loading="sub">取消</el-button>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </el-form>-->
  </div>
</div>
</template>

<script>
  import {savePayHost,getUserHostpay} from '@/api/getData'

  export default {
    name: 'resourceSave',

    data() {
      return {
        sub: false,
        formRules: {
          name: [
            {required: true, message: '名字', trigger: 'blur'},
          ],
          phone: [
            {required: true, message: 'url', trigger: 'blur'},
          ],
        },
        fileName:'',
        gzhName:'',
        form: {
          appid: '',
          mch_id: '',
          shopKey: '',
          notify_url: '',
          hostnameId: '',

          secret:''
        }
      }
    },
    async created() {
      this.getOne();
    },
    methods: {
      goBack() {
        this.$route.back(-1);
      },
      async ok(form) {
        if(this.$refs.key.files[0]!=undefined){
          this.form.key = this.$refs.key.files[0];
        }
        if(this.$refs.gzh.files[0]!=undefined){
          this.form.gzh = this.$refs.gzh.files[0];
        }
        const a = await savePayHost(this.form,
          {
            obj: this,
            key: 'sub'
          })
        this.sub = false;
        if (a._result) {
          this.sub = false
          this.$message.success('添加成功')
          this.$router.go(0);
        }
      },
      changeFile(){
       let f= this.$refs.key.files[0];
       //console.log(f);
       this.fileName = f.name;
      },
      changeGZHFile(){
        let f= this.$refs.gzh.files[0];
        console.log(f);
        this.gzhName = f.name;
      },
      async getOne(){
        let one = await getUserHostpay();
        if(one._result&&one.data!=null){
          this.form.appid = one.data.appid;
          this.form.mch_id = one.data.mch_id;
          this.form.shopKey = one.data.shopKey;
          this.form.notify_url = one.data.notify_url;
          this.form.hostnameId = one.data.hostnameId;
          this.form.secret = one.data.secret;

        }
      }
    }
  }
</script>

<style scoped>
  .file_upload_box {
    display: inline-block;
    width: 200px;
    height: auto;
    position: relative;
    overflow: hidden;
  }
  .file_upload_box input[type=file] {
    position: absolute;
    left: 0;
    top: 6px;
    width: 100px;
    line-height: 25px;
    opacity: 0;
    cursor: pointer;
  }
  .file_upload_box a {
    display: inline-block;
    width: 50%;
    line-height: 25px;
    text-align: center;
    font-family: "Microsoft yahei";
    background-color: #315baf;
    color: #FFF;
    font-weight: 700;
    text-decoration: none;
  }
</style>
